<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript" src="./js/xl.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/xl.css"/>
    <!-- zx -->
    <script src="./layui/layui.js"></script>
    <script src="./js/my.js"></script>
    <link rel="stylesheet" href="./css/my.css">
    <link rel="stylesheet" href="./images/font/iconfont.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <title>xl项目</title>
</head>
<body>
<!-- zx -->
<div class="overall">
    <!--			导航栏-->
    <div class="nav">
        <!--				logo区-->
        <div class="logo"><img src="./images/logo.jpg" style="width: 70px;height: 70px;">
            <span> <h1>欣磊科技</h1></span>
        </div>
        <!--				分类-->
        <div class="sort"><span class="icon iconfont">&#xe660;</span><span>分类</span></div>
        <div>
            <!--					搜索栏-->
            <div class="mod">
                <div class="mod-dropdown">
                    <span class="mod-search" id="Course" onclick="showJG()" style="display: block;">课程</span>
                    <span class="mod-search" onclick="Hidden()" id="organ" style="display: none;">机构</span>
                </div>
                <!--                输入框-->
                <input onfocus="showSV()" onBlur="hideSV()" onkeyup="testAjax()" type="text" id="keyword"
                       class="mod-search_input"
                       placeholder="搜索课程">
                <!--               搜索图标-->
                <a class="btn-search"><span class="icon iconfont">&#xe600;</span></a>
            </div>
            <!--            热门搜索框-->
            <div class="header" id="header" style="display: none;">
            </div>
        </div>
        <!--/*头部右侧功能导航栏*/-->
        <div class="header-text">
            <!--     入驻/合作       -->
            <div class="header-join">
                <p class="join-tt">入驻/合作</p>
                <ul class="join-list">
                    <li><a href="https://ke.qq.com/admin/personal_join.html">个人入驻</a></li>
                    <li><a href="https://ke.qq.com/admin/agency_join.html">机构入驻</a></li>
                    <li><a href="https://ke.qq.com/sale.html">分销课程</a></li>
                    <li><a href="https://ke.qq.com/cates/cooperation/index.html">企业合作</a></li>
                </ul>
            </div>
            <div class="header-quick">
                <a href="https://ke.qq.com/s">极速版</a>
            </div>
            <div class="header-download">
                <p class="download-tt">客户端</p>
                <ul class="download-list">
                    <li><a href="https://ke.qq.com/download/pcapp.html">Win客户端</a></li>
                    <li><a href="https://ke.qq.com/download/macapp.html">Mac客户端</a></li>
                    <li><a href="https://ke.qq.com/download/app.html">App客户端</a></li>
                </ul>
            </div>
            <div class="header-private">
                <a href="#">私信</a>
            </div>
            <div  id="name">
                <div class="header-private" onclick="MyShow()">
                    <a href="#">登录</a>
                </div>
            </div>

        </div>
    </div>
    <!--    轮播图-->
    <div class="carousel">
        <div class="layui-carousel" id="test10">
            <div carousel-item="">
                <div><img src="https://p.qpic.cn/qqconadmin/0/efda9f292d934ab591c1f5ce150493ae/0?tp=webp"></div>
                <div><img src="https://p.qpic.cn/qqconadmin/0/4e794b9922aa44b49f918b026d1c2072/0?tp=webp"></div>
                <div><img src="https://p.qpic.cn/qqconadmin/0/3b11f487fc8a481b92a15a8193e5d819/0?tp=webp"></div>
                <div><img src="https://p.qpic.cn/qqconadmin/0/9b7ebd29a5de4d15b31f440d4ba4d5f2/0"></div>
                <div><img src="https://p.qpic.cn/qqconadmin/0/51383fd39cc044e18ce2d54c8c332793/0?tp=webp"></div>
                <div><img src="https://p.qpic.cn/qqconadmin/0/1975c0f90d5f49c782721a8d2ffc579e/0?tp=webp"></div>
                <div><img src="https://p.qpic.cn/qqconadmin/0/3bbce89d263140f9b2b74bcf1d19d00d/0?tp=webp"></div>
            </div>
        </div>
    </div>
    <!--    登录页面-->
    <div class="login" id = "login" style="display: none">
        <!--        遮罩层-->
        <div class="login-mask"></div>
        <div class="login-wrapper">
            <a href="javascript:void(0)" onclick="MyClose()" class="login-close" title="关闭"><img src="./images/close.png" style="width: 30px;">
            </a>
            <div class="login-qq">
                <h2 class="login-qq-title"><img src="./images/QQ.png" style="width: 20px;">QQ号登录</h2>
                <div class="login-iframe">
                    <div class="qlogin">
                        <div class="title" id="title_0" style="display: block;">账号密码登录</div>
                        <div class="qlogin_tips" id="qlogin_tips_0" style="display: block;">推荐使用
                            <a class="link_tips" href="http://im.qq.com/mobileqq/#from=login" target="_blank">手机QQ
                            </a>扫码登录，防止盗号。
                        </div>
                        <div class="login_form">
                            <div class="uinArea" id="uinArea">
                                <input type="text" class="inputstyle" placeholder="支持QQ号/邮箱/手机号登录" name="userBeen.username" id="user"value="">
                                <input type="password" class="inputstyle" placeholder="密码" name="userBeen.pwd" id="pwd">
                                <div class="submit">
                                    <input type="submit" onclick="login()" value="登 录" class="btn" id="login_button">
                                </div>
                                <div class='sucess' id="suc"><span>√</span></div>
                            </div>
                        </div>
                    </div>
                    <!--                    底部自动登录行-->
                    <div class="bottom">
                                <span class="bottom-checked">
                                    <input type="checkbox"><span>下次自动登录</span>
                                </span>
                        <span class="pwd">忘记密码？</span>
                        <span class="user">注册新账号</span>
                        <span>意见反馈</span>
                    </div>
                </div>
                <!--                    其他登录-->
                <div class="login-other">
                    <p class="login-other-title">其他登录方式</p>
                    <div class="login-other-name">
                        <a href="#">
                            <img src="./images/wx.png" alt="">
                            <p>微信</p>
                        </a>
                        <a href="#">
                            <img src="./images/sso.png" alt="">
                            <p>SSO</p>
                        </a>
                        <a href="#">
                            <img src="./images/phone.png" alt="">
                            <p>手机号</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content">
			<!-- 导航 -->
			<div class="content_nav">
				<div class="content_nav_txt">
					<span  class="nomchecked checked">精选推荐</span>
					<span  class="nomchecked">Java开发</span>
					<span  class="nomchecked">平面设计</span>
					<span  class="nomchecked">职业技能</span>
					<span  class="nomchecked">高中</span>
					<span  class="nomchecked">英语</span>
					<span  class="nomchecked">文艺修养</span>
				</div>
				<div class="content_nav_btn">
					<button type="button">修改兴趣</button>
				</div>
			</div>
		    <div>
				<!-- 课程 -->
				<div class="content_video " id="100">
					<div>
						<div class="content_video_title">
							<span>IT互联网热门课程</span>
						</div>
						<div class="content_video_box">
							<div class="video_box_father">
								<ul class="video_box">
								</ul>
							</div>
						</div>
					</div>
					<div>
						<div class="content_video_title">
							<span>设计创作热门课程</span>
						</div>
						<div class="content_video_box">
							<div class="video_box_father">
								<ul class="video_box">
								</ul>
							</div>
						</div>
					</div>
					<div>
						<div class="content_video_title">
							<span>电商营销热门课程</span>
						</div>
						<div class="content_video_box">
							<div class="video_box_father">
								<ul class="video_box">
								</ul>
							</div>
						</div>
					</div>
					<div>
						<div class="content_video_title">
							<span>地道日韩语修炼</span>
						</div>
						<div class="content_video_box">
							<div class="video_box_father">
								<ul class="video_box">
								</ul>
							</div>
						</div>
					</div>
					<div>
						<div class="content_video_title">
							<span>近30天最多人在学</span>
						</div>
						<div class="content_video_box">
							<div class="video_box_father">
								<ul class="video_box">
								</ul>
							</div>
						</div>
					</div>
					<div class="foot-js	">
					</div>
				</div>
				<!-- java -->
				<div class="content_video hidden" id="101" >
					<div>
						<div class="content_video_title">
							<span>免费直播课</span>
						</div>
						<div class="zsxJava_videoList">
							<div class="zsxJava_videoList_img">
								<!-- 遮盖 -->
								<div class="_img_tips">
									<div class="_img_tips_top">
									</div>
								</div>
								<!-- 图片 -->
								<ul>
									<li class="_imgWidth"><img id="_imgWidth" src="./images/1.jpg" alt=""></li>
								</ul>
							</div>
							<div class="zsxJava_videoList_text">
								<ul class="zsxJava_videoList_text_ul">
								</ul>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>官方推荐训练营课</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>精选公开课</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>精选VIP课程</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div class="foot-js	">
						</div>
					</div>
				</div>
				<!-- 平面设计 -->
				<div class="content_video hidden" id="102" >
					<div>
						<div class="content_video_title">
							<span>免费直播课</span>
						</div>
						<div class="zsxJava_videoList">
							<div class="zsxJava_videoList_img">
								<!-- 遮盖 -->
								<div class="_img_tips">
									<div class="_img_tips_top">
									</div>
								</div>
								<!-- 图片 -->
								<ul>
									<li class="_imgWidth"><img src="./images/1.jpg" alt=""></li>
								</ul>
							</div>
							<div class="zsxJava_videoList_text">
								<ul class="zsxJava_videoList_text_ul">
								</ul>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>官方推荐训练营课</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>精选公开课</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>精选VIP课程</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div class="foot-js	">
						</div>
					</div>
				</div>
				<!-- 职业技能 -->
				<div class="content_video hidden" id="103" >
					<div>
						<div class="content_video_title">
							<span>免费直播课</span>
						</div>
						<div class="zsxJava_videoList">
							<div class="zsxJava_videoList_img">
								<!-- 遮盖 -->
								<div class="_img_tips">
									<div class="_img_tips_top">
									</div>
								</div>
								<!-- 图片 -->
								<ul>
									<li class="_imgWidth"><img src="./images/1.jpg" alt=""></li>
								</ul>
							</div>
							<div class="zsxJava_videoList_text">
								<ul class="zsxJava_videoList_text_ul">
								</ul>
							</div>
						</div>
						<div>
							<div class="content_video_title  ">
								<span>官方推荐训练营课</span>
								<!-- <span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span> -->
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title">
								<span>精选公开课</span>
								<!-- <span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span> -->
							</div>
							<!-- <div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div> -->
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  ">
								<span>精选VIP课程</span>
								<!-- <span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span> -->
							</div>
							<!-- <div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div> -->
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div class="foot-js	">
						</div>
					</div>
				</div>
				<!-- 高中 -->
				<div class="content_video hidden" id="104" >
					<div>
						<div class="content_video_title">
							<span>免费直播课</span>
						</div>
						<div class="zsxJava_videoList">
							<div class="zsxJava_videoList_img">
								<!-- 遮盖 -->
								<div class="_img_tips">
									<div class="_img_tips_top">
									</div>
								</div>
								<!-- 图片 -->
								<ul>
									<li class="_imgWidth"><img src="./images/1.jpg" alt=""></li>
								</ul>
							</div>
							<div class="zsxJava_videoList_text">
								<ul class="zsxJava_videoList_text_ul">
								</ul>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>官方推荐训练营课</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>精选公开课</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>精选VIP课程</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div class="foot-js	">
						</div>
					</div>
				</div>
				<!-- 英语 -->
				<div class="content_video hidden" id="105" >
					<div>
						<div class="content_video_title">
							<span>免费直播课</span>
						</div>
						<div class="zsxJava_videoList">
							<div class="zsxJava_videoList_img">
								<!-- 遮盖 -->
								<div class="_img_tips">
									<div class="_img_tips_top">
									</div>
								</div>
								<!-- 图片 -->
								<ul>
									<li class="_imgWidth"><img src="./images/1.jpg" alt=""></li>
								</ul>
							</div>
							<div class="zsxJava_videoList_text">
								<ul class="zsxJava_videoList_text_ul">
								</ul>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>官方推荐训练营课</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>精选公开课</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  content_video_title_more">
								<span>精选VIP课程</span>
								<span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span>
							</div>
							<div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div class="foot-js	">
						</div>
					</div>
				</div>
				<!-- 文艺修养 -->
				<div class="content_video hidden" id="106" >
					<div>
						<div class="content_video_title">
							<span>免费直播课</span>
						</div>
						<div class="zsxJava_videoList">
							<div class="zsxJava_videoList_img">
								<!-- 遮盖 -->
								<div class="_img_tips">
									<div class="_img_tips_top">
									</div>
								</div>
								<!-- 图片 -->
								<ul>
									<li class="_imgWidth"><img src="./images/1.jpg" alt=""></li>
								</ul>
							</div>
							<div class="zsxJava_videoList_text">
								<ul class="zsxJava_videoList_text_ul">
								</ul>
							</div>
						</div>
						<div>
							<div class="content_video_title  ">
								<span>官方推荐训练营课</span>
								<!-- <span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span> -->
							</div>
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title">
								<span>精选公开课</span>
								<!-- <span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span> -->
							</div>
							<!-- <div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div> -->
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div>
							<div class="content_video_title  ">
								<span>精选VIP课程</span>
								<!-- <span>更多<img class="_more_right" src="./images/right_block.png" alt=""></span> -->
							</div>
							<!-- <div class="_video_hotList">
								<dl class="_video_hotList_dl">
									<dt>热门分类</dt>
									<dd>
										<ul class="_video_hotList_ul">
											<li>不限</li>
											<li>Java进阶</li>
											<li>Java零基础</li>
										</ul>
									</dd>
								</dl>
							</div> -->
							<div class="content_video_box">
								<div class="video_box_father">
									<ul class="video_box">
									</ul>
								</div>
							</div>
						</div>
						<div class="foot-js	">
						</div>
					</div>
				</div>
	        </div>
		</div>
</body>
<script>
    // zx
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;
        //图片轮播
        carousel.render({
            elem: '#test10'
            , width: '778px'
            , height: '440px'
            , interval: 5000
        });

        //事件
        carousel.on('change(test4)', function (res) {
            console.log(res);
        });

        var $ = layui.$, active = {
            set: function (othis) {
                var THIS = 'layui-bg-normal'
                    , key = othis.data('key')
                    , options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function () {
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function () {
            var value = this.value
                , options = {};
            if (!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
</html>
